<div id="cf-plugin">
    <div class="block cf-plugin-block">
        <div class="kintoneplugin-label">{{html:terms.cf_text_title}}</div>
        <div class="kintoneplugin-row">
            <table class="cf-plugin-text-table kintoneplugin-table">
                <thead>
                    <tr>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column1}}<span class="kintoneplugin-require">*</span></a></span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column2}}
                                <span class="kintoneplugin-require">*</span>
                            </span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column3}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column4}}<span class="kintoneplugin-require">*</span></a></span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column5}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column6}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column7}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_text_column8}}</span>
                        </th>
                        <th class="kintoneplugin-table-th-blankspace"></th>
                        <th class="kintoneplugin-table-th-blankspace"></th>
                    </tr>
                </thead>
                <tbody id="cf-plugin-text-tbody">
                    <tr class="cf-plugin-text-line">
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-field-type">
                                            <select class="cf-plugin-column1">
                                                <option value="">-----</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-ctype">
                                            <select class="cf-plugin-column2">
                                                <option value="">-----</option>
                                                <option value="match">{{html:terms.cf_text_column2_option1}}</option>
                                                <option value="unmatch">{{html:terms.cf_text_column2_option2}}</option>
                                                <option value="==">{{html:terms.cf_text_column2_option3}}</option>
                                                <option value="!=">{{html:terms.cf_text_column2_option4}}</option>
                                                <option value="<=">{{html:terms.cf_text_column2_option5}}</option>
                                                <option value="<">{{html:terms.cf_text_column2_option6}}</option>
                                                <option value=">=">{{html:terms.cf_text_column2_option7}}</option>
                                                <option value=">">{{html:terms.cf_text_column2_option8}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <span>
                                        <input class="kintoneplugin-input-text cf-plugin-column3"/>
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-field-type">
                                            <select class="cf-plugin-column4">
                                                <option value="">-----</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cf-plugin-column5-td">
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div>
                                        <input type="text" class="kintoneplugin-input-text cf-plugin-column5" maxlength="7" value="#000000"/>
                                        <i class="fa fa-paint-brush color-paint-brush"></i>
                                        <input type="color" class="cf-plugin-column5-color"/>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cf-plugin-column6-td">
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div>
                                        <input type="text" class="kintoneplugin-input-text cf-plugin-column6" maxlength="7" value="#">
                                        <i class="fa fa-paint-brush color-paint-brush"></i>
                                        <input type="color" class="cf-plugin-column6-color"/>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-font">
                                            <select class="cf-plugin-column7">
                                                <option value="">{{html:terms.cf_text_column7_option1}}</option>
                                                <option value="x-small">{{html:terms.cf_text_column7_option2}}</option>
                                                <option value="small">{{html:terms.cf_text_column7_option3}}</option>
                                                <option value="large">{{html:terms.cf_text_column7_option4}}</option>
                                                <option value="x-large">{{html:terms.cf_text_column7_option5}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-font">
                                            <select class="cf-plugin-column8">
                                                <option value="">{{html:terms.cf_text_column8_option1}}</option>
                                                <option value="bold">{{html:terms.cf_text_column8_option2}}</option>
                                                <option value="underline">{{html:terms.cf_text_column8_option3}}</option>
                                                <option value="line-through">{{html:terms.cf_text_column8_option4}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="kintoneplugin-table-td-operation cf-plugin-column9">
                            <button type="button" class="kintoneplugin-button-add-row-image addList" title="Add row"></button>
                            <button type="button" class="kintoneplugin-button-remove-row-image removeList" title="Delete this row"></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="block cf-plugin-block">
        <div class="kintoneplugin-label">{{html:terms.cf_date_title}}</div>
        <div class="kintoneplugin-row">
            <table class="cf-plugin-date-table kintoneplugin-table">
                <thead>
                    <tr>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column1}}<span class="kintoneplugin-require">*</span></span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column2}}<span class="kintoneplugin-require">*</span></span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column3}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column4}}<span class="kintoneplugin-require">*</span></span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column5}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column6}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column7}}</span>
                        </th>
                        <th class="kintoneplugin-table-th">
                            <span class="title">{{html:terms.cf_date_column8}}</span>
                        </th>
                        <th class="kintoneplugin-table-th-blankspace"></th>
                        <th class="kintoneplugin-table-th-blankspace"></th>
                    </tr>
                </thead>
                <tbody id="cf-plugin-date-tbody">
                    <tr class="cf-plugin-date-line">
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-field-type">
                                            <select class="cf-plugin-column1">
                                                <option value="">-----</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-ctype">
                                            <select class="cf-plugin-column2">
                                                <option value="">-----</option>
                                                <option value="==">{{html:terms.cf_date_column2_option1}}</option>
                                                <option value="!=">{{html:terms.cf_date_column2_option2}}</option>
                                                <option value="<=">{{html:terms.cf_date_column2_option3}}</option>
                                                <option value="<">{{html:terms.cf_date_column2_option4}}</option>
                                                <option value=">=">{{html:terms.cf_date_column2_option5}}</option>
                                                <option value=">">{{html:terms.cf_date_column2_option6}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cf-plugin-date-column3-td">
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <span class="cf-plugin-column3-select1">
                                        {{html:terms.cf_date_column2_desc1}}
                                        <input class="kintoneplugin-input-text cf-plugin-column3" value="0"/>
                                        {{html:terms.cf_date_column2_desc2}}
                                    </span>
                                    <span class="kintoneplugin-select cf-date-type">
                                        <select class="cf-plugin-column3-select2">
                                            <option value="before">{{html:terms.cf_date_column3_option1}}</option>
                                            <option value="after">{{html:terms.cf_date_column3_option2}}</option>
                                        </select>
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-field-type">
                                            <select class="cf-plugin-column4">
                                                <option value="">-----</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cf-plugin-column5-td">
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div>
                                        <input type="text" class="kintoneplugin-input-text cf-plugin-column5" maxlength="7" value="#000000"/>
                                        <i class="fa fa-paint-brush color-paint-brush"></i>
                                        <input type="color" class="cf-plugin-column5-color"/>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="cf-plugin-column6-td">
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div>
                                    	<input type="text" class="kintoneplugin-input-text cf-plugin-column6" maxlength="7" value="#"/>
                                        <i class="fa fa-paint-brush color-paint-brush"></i>
                                        <input type="color" class="cf-plugin-column6-color"/>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                        <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-font">
                                            <select class="cf-plugin-column7">
                                                <option value="">{{html:terms.cf_date_column7_option1}}</option>
                                                <option value="x-small">{{html:terms.cf_date_column7_option2}}</option>
                                                <option value="small">{{html:terms.cf_date_column7_option3}}</option>
                                                <option value="large">{{html:terms.cf_date_column7_option4}}</option>
                                                <option value="x-large">{{html:terms.cf_date_column7_option5}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="kintoneplugin-table-td-control">
                                <div class="kintoneplugin-table-td-control-value">
                                    <div class="kintoneplugin-select-outer">
                                        <div class="kintoneplugin-select cf-font">
                                            <select class="cf-plugin-column8">
                                                <option value="">{{html:terms.cf_date_column8_option1}}</option>
                                                <option value="bold">{{html:terms.cf_date_column8_option2}}</option>
                                                <option value="underline">{{html:terms.cf_date_column8_option3}}</option>
                                                <option value="line-through">{{html:terms.cf_date_column8_option4}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="kintoneplugin-table-td-operation cf-plugin-column9">
                            <button type="button" class="kintoneplugin-button-add-row-image addList" title="Add row"></button>
                            <button type="button" class="kintoneplugin-button-remove-row-image removeList" title="Delete this row"></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="block">
        <button class="kintoneplugin-button-dialog-ok" id="cf-submit" type="button">{{html:terms.cf_plugin_submit}}</button>
        <button class="kintoneplugin-button-dialog-cancel" id="cf-cancel" type="button">{{html:terms.cf_plugin_cancel}}</button>
    </div>
</div>
